<!-- merchandise-prize-draw 商品抽奖 -->
<template>
  <div id="merchandise-prize-draw">
    <div
      class="goods-prize-draw border-radius-8 flex-column flex-j-sb t-l"
      :style="{ backgroundImage: 'url(' + imgPath + 'merchandise-prize-draw/product-lottery-entry.png)' }"
      @click.stop="toDrawDetail"
    >
      <div class="f-bold f-18">{{ datas.name }} <i class="f-14 f-bold iconfont icon-advertise-next"></i></div>
      <div class="margin-top-8">
        <div class="f-13">活动参与进度：{{ datas.count_order }}/{{ datas.order_num }}</div>
        <div class="margin-top-4" style="width: 50%;">
          <van-progress :percentage="percentage" :show-pivot="false" :stroke-width="8" color="#ffffff" track-color="#FFA08D" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "merchandise-prize-draw",
  props: {
    datas: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      percentage: 100,
      imgPath: ""
    };
  },

  activated() {},

  components: {},

  computed: {},

  mounted() {
    this.percentage = (this.datas.count_order / this.datas.order_num) * 100;
    this.imgPath = this.$store.state.imgPath;
  },

  methods: {
    toDrawDetail() {
      this.$router.push(this.fun.getUrl("MerchandisePrizeDrawDetail", { id: this.$route.params.id }));
    }
  }
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
.goods-prize-draw {
  margin: 0 0.625rem 0.625rem 0.625rem;
  padding: 0.625rem 0.875rem;
  background: #ff2d43;
  color: #fff;
  background-position: top center;
  background-size: 100%;
  background-repeat: no-repeat;
}
</style>
